/**
* @author kobe
* @date   10/05/27
*/

(function(lf,r){

	// var time = lf.utils.format(new Date(),"yyyy-MM-dd hh:mm"),
     //    ajax = lf.utils.ajax,
     //    NoData = lf.component.NoData,
     //    PullRefresh = lf.component.PullRefresh,
     //    LoadingLayout = lf.component.LoadingLayout,
     //    appAlert = lf.bridgeJs.alert,
     //    log = lf.utils.log;

    var imgUrl = "../public/images/yue/";
    var his_info = {
		launch:'30',
		involved: '40'
	};
    //模拟数据
	var	user_info = {
    	card_msg:{
			avatar: '../public/images/finger/report.png',
			name: 'Kemmt',
			sex: 'women',
			age: '25',
			zodiac: '处女座',
		},
		list_msg:{
			group1:{
				star:{
					title:'星级',
					level: '2'
				},
				dt:{
					title:'个人动态',
					imgSrc:[imgUrl+'example/1.jpg',imgUrl+'example/2.jpg',imgUrl+'example/3.jpg',imgUrl+'example/4.jpg']
				}
			},
			group2:[
				{
					'title':'昵称',
					'msg':'Kemmt'
				},
				{
					'title':'情感状态',
					'msg':'单身'
				}
			],
			group3:[
				{
					'title':'身高',
					'msg':'180cm'
				},
				{
					'title':'职业',
					'msg':'程序员'
				},
				{
					'title':'技能',
					'msg':['做饭','裁缝']
				}
			]
		}
	};

	console.log(user_info.list_msg.group2[1].msg);
    var Avatar = React.createClass({
        componentDidMount:function(){
            var sex = this.props.info.sex;
            $('.u-sex > .icon').addClass(sex);
        },
    	render : function(){
    		var info = this.props.info;
    		return(
    			<div className="avatar">
	    			<div className="u-img"><img src={info.avatar} /></div>
	    			<div className="u-name">{info.name}</div>
	    			<div className="u-age">
                        <span className="u-sex">
                            <i className="icon"></i>{info.age}
                        </span>
                        {info.zodiac}
                    </div>
    			</div>
    		);
    	}
    })

    var HistoryInfo = React.createClass({
    	render : function(){
    		var info = this.props.info;
    		return(
    			<div className="history-info">
    				<div className="h-info">
    					<p>正发起的<span className="info-num">{info.launch}</span></p>
    				</div>
    				<div className="h-info">
    					<p>参与过的<span className="info-num">{info.involved}</span></p>
    				</div>
    			</div>
    		)
    	}
    })


    var InfoCard = React.createClass({
    	render: function(){
    		var info = this.props.info;
    		return(
    			<div className="info-card">
    				<Avatar info={info}/>
    				<HistoryInfo info={his_info}></HistoryInfo>
    			</div>
    		)
    	}
    })

    var InfoList = React.createClass({
    	render:function(){
    		var info = this.props.info;
    		return(
    			<div className="info-list">
    				<TopList info={info.group1}></TopList>
    				<ListGroup info={info.group2}></ListGroup>
    				<ListGroup info={info.group3}></ListGroup>
    			</div>
    		)
    	}
    })

    var TopList = React.createClass({
    	render:function(){
    		var info = this.props.info;
	    	return(
	    		<div className="list-group">
	    			<ul className="mui-table-view">
	    				<li className="mui-table-view-cell">
							<span className="mui-pull-left">{info.star.title}</span>
							<StarShow level={info.star.level}></StarShow>
						</li>
					</ul>
					<ul className="mui-table-view">
	    				<li className="mui-table-view-cell">
	    					<a className="mui-navigate-right">
								<span className="mui-pull-left">{info.dt.title}</span>
								<DtImg info={info.dt.imgSrc}></DtImg>
							</a>
						</li>
					</ul>
	    		</div>
	    	)
    	}
    })

    var StarShow = React.createClass({
        componentDidMount:function(){
            var getLevel = this.props.level;
            for (var i = 0; i < getLevel; i++) {
                $('#levelStar > i').eq(i).removeClass('defaul').addClass('fill');
            }
        },
    	render: function(){
    		return(
    			<div className="mui-pull-right" id="levelStar">
    				<i className="star defaul"></i>
    				<i className="star defaul"></i>
    				<i className="star defaul"></i>
    				<i className="star defaul"></i>
					<i className="star defaul"></i>
				</div>
    		)
    	}
    })

    var DtImg = React.createClass({
    	render:function(){
    		var src = this.props.info.map(function(src){
    			return(
    				<div className="dt-img"><img src={src} /></div>
    			)
    		})
    		return(
    			<div className="mui-pull-right dt-group">
    				{src}
    			</div>
    		)
    	}
    })

    var ListGroup = React.createClass({
    	render:function(){
			var list = this.props.info.map(function(info){
				return(
					<ul className="mui-table-view">
	    				<li className="mui-table-view-cell">
							<span className="mui-pull-left">{info.title}</span>
							<span className="mui-pull-right">{info.msg}</span>
						</li>
					</ul>
				)
			})

    		return(
    			<div className="list-group">{list}</div>
    		)
    	}
    })

	var ChatButton = React.createClass({
		render:function(){
			return(
				<a className="chat-btn" href="#">聊天</a>
			)
		}
	})


    var Compose = React.createClass({
    	render:function(){
    		console.log(user_info.list_msg);
    		return(
    			<div className="yue-detail">
    				<InfoCard info={user_info.card_msg}/>
    				<InfoList info={user_info.list_msg}/>
					<ChatButton />
    			</div>
    		)
    	}
    })

    r.render(
    	<Compose />,
    	document.getElementById('root'),
    	function(){

    	}
    );

})( liefeng, React)
